<script>
import { ref , reactive} from 'vue';
import { Toast } from 'vant';
export default {
    setup() {
        const active = ref(1);
        let data = reactive({
            lists:[
                {
                    id:1,
                    name:"我的透视超给力",
                    img:"https://bookcover.yuewen.com/qdbimg/349573/1033806888/150" ,
                    many:29.8
                },
                {
                    id:2,
                    name:"我的透视超给力",
                    img:"https://bookcover.yuewen.com/qdbimg/349573/1033806888/150" ,
                    many:29.8
                }
            ],
            payment:[],//支付数据
            deliv:[],//发货
            reces:[],//已完成

        })

        //支付
        let pay = (id) => {
            let index = data.lists.findIndex(item=>item.id==id);
            console.log(index);
            data.payment.unshift(data.lists[index])
            console.log(data.payment);
            window.localStorage.setItem("zhifu",JSON.stringify(data.payment))

            data.lists.splice(index,1)
            Toast.success("支付成功")
        }

        //确认发货
        let goods = (id) => {
            let index = data.payment.findIndex(item=>item.id==id);
            data.deliv.unshift(data.payment[index])
            window.localStorage.setItem("fahuo",JSON.stringify(data.deliv))

            data.payment.splice(index,1)
            Toast.success("发货成功")
        }

        //确认收货
        let rece = (id) => {
            let index = data.deliv.findIndex(item=>item.id==id);
            data.reces.unshift(data.deliv[index])
            window.localStorage.setItem("shouhuo",JSON.stringify(data.reces))

            data.deliv.splice(index,1)
            Toast.success("收货成功")
        }

        //获取支付完数据
        if(localStorage.getItem("zhifu")){
            data.payment = JSON.parse(localStorage.getItem("zhifu"))
            console.log(data.payment);
        }
        //获取发货完数据
        if(localStorage.getItem("fahuo")){
            data.deliv = JSON.parse(localStorage.getItem("fahuo"))
            console.log(data.deliv);
        }
        //获取收货完数据
        if(localStorage.getItem("shouhuo")){
            data.reces = JSON.parse(localStorage.getItem("shouhuo"))
            console.log(data.reces);
        }
        return { 
            active,
            data,
            pay,
            goods,
            rece
         };
    },
}
</script>

<template>
    <div class="pay_box">
        <div class="container">
            <div class="pay_top">
                <span class="iconfont icon-arrow-left"></span>
                <h3>订单详情</h3>
                <div class="dian">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="pay_main">
                <van-tabs v-model:active="active">
                    <van-tab title="全部">
                        <div class="box_p">
                            <div class="box_b" v-for="item in data.lists" :key="item.id">
                                <div class="top">
                                    <div class="title_t">
                                        <img src="https://bookcover.yuewen.com/qdbimg/349573/1033806888/150" alt="">
                                        <span>终点小说</span>
                                    </div>
                                    <strong>待支付</strong>
                                </div>
                                <div class="bottom">
                                    <div class="image">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="title">
                                        <p>{{item.name}}</p>
                                        <span>番茄炖肉</span>
                                        <span>连载中 · 274.4万字</span>
                                    </div>
                                    <div class="many">
                                        <p>￥{{item.many}}</p>
                                        <p>x1</p>

                                    </div>

                                </div>
                                <div class="num">合计￥<strong>{{item.many}}</strong></div>
                                <div class="buttons">
                                    <button>取消订单</button>
                                    <button @click="pay(item.id)">去支付</button>
                                </div>
                            </div>

                            <div class="box_b" v-for="item in data.reces" :key="item.id">
                                <div class="top">
                                    <div class="title_t">
                                        <img src="https://bookcover.yuewen.com/qdbimg/349573/1033806888/150" alt="">
                                        <span>终点小说</span>
                                    </div>
                                    <strong>已完成</strong>
                                </div>
                                <div class="bottom">
                                    <div class="image">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="title">
                                        <p>{{item.name}}</p>
                                        <span>番茄炖肉</span>
                                        <span>连载中 · 274.4万字</span>
                                    </div>
                                    <div class="many">
                                        <p>￥{{item.many}}</p>
                                        <p>x1</p>

                                    </div>

                                </div>
                                <div class="num">合计￥<strong>{{item.many}}</strong></div>
                               
                            </div>
                           
                        </div>
                    </van-tab>
                    <van-tab title="待支付">
                        <div class="box_p">
                            <div class="box_b" v-for="item in data.lists" :key="item.id">
                                <div class="top">
                                    <div class="title_t">
                                        <img src="https://bookcover.yuewen.com/qdbimg/349573/1033806888/150" alt="">
                                        <span>终点小说</span>
                                    </div>
                                    <strong>待支付</strong>
                                </div>
                                <div class="bottom">
                                    <div class="image">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="title">
                                        <p>{{item.name}}</p>
                                        <span>番茄炖肉</span>
                                        <span>连载中 · 274.4万字</span>
                                    </div>
                                    <div class="many">
                                        <p>￥{{item.many}}</p>
                                        <p>x1</p>

                                    </div>

                                </div>
                                <div class="num">合计￥<strong>{{item.many}}</strong></div>
                                <div class="buttons">
                                    <button>取消订单</button>
                                    <button @click="pay(item.id)">去支付</button>
                                </div>
                            </div>
                           
                        </div>
                    </van-tab>
                    <van-tab title="待发货">
                        <div class="box_p">
                            <div class="box_b" v-for="item in  data.payment" :key="item.id">
                                <div class="top">
                                    <div class="title_t">
                                        <img src="https://bookcover.yuewen.com/qdbimg/349573/1033806888/150" alt="">
                                        <span>终点小说</span>
                                    </div>
                                    <strong>待发货</strong>
                                </div>
                                <div class="bottom">
                                    <div class="image">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="title">
                                        <p>{{item.name}}</p>
                                        <span>番茄炖肉</span>
                                        <span>连载中 · 274.4万字</span>
                                    </div>
                                    <div class="many">
                                        <p>￥{{item.many}}</p>
                                        <p>x1</p>

                                    </div>

                                </div>
                                <div class="num">合计￥<strong>{{item.many}}</strong></div>
                                <div class="buttons">
                                    <button>取消订单</button>
                                    <button @click="goods(item.id)">确认发货</button>
                                </div>
                            </div>
                           
                        </div>
                    </van-tab>
                    <van-tab title="待收货">
                        <div class="box_p">
                            <div class="box_b" v-for="item in data.deliv" :key="item.id">
                                <div class="top">
                                    <div class="title_t">
                                        <img src="https://bookcover.yuewen.com/qdbimg/349573/1033806888/150" alt="">
                                        <span>终点小说</span>
                                    </div>
                                    <strong>待收货</strong>
                                </div>
                                <div class="bottom">
                                    <div class="image">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="title">
                                        <p>{{item.name}}</p>
                                        <span>番茄炖肉</span>
                                        <span>连载中 · 274.4万字</span>
                                    </div>
                                    <div class="many">
                                        <p>￥{{item.many}}</p>
                                        <p>x1</p>

                                    </div>

                                </div>
                                <div class="num">合计￥<strong>{{item.many}}</strong></div>
                                <div class="buttons">
                                    <button>取消订单</button>
                                    <button @click="rece(item.id)">确认收货</button>
                                </div>
                            </div>
                           
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <div class="tuijian">
                <h3>你可能还会喜欢</h3>
                <div class="tui">
                    <div class="t-box">
                        <div class="image">
                            <img src="https://book.img.zhangyue01.com/idc_1/group61/M00/5F/8C/CmQUOF926nmEWm_pAAAAADLaAWY975827217.jpg?v=5zd97P5i&t=CmQUOF926nk." alt="">
                        </div>
                        <div class="name">
                            女配修仙记之一路登仙
                        </div>
                        <div class="many">
                            ￥4.90
                        </div>
                    </div>
                    <div class="t-box">
                        <div class="image">
                            <img src="https://book.img.zhangyue01.com/idc_1/group61/M00/0B/D6/CmRaIV937lmEUUFiAAAAACSP5f0358643148.jpg?v=cVHwbPUL&t=CmRaIV937lk." alt="">
                        </div>
                        <div class="name">
                            女将修仙之上神别挡道
                        </div>
                        <div class="many">
                            ￥4.90
                        </div>
                    </div>
                    <div class="t-box">
                        <div class="image">
                            <img src="https://book.img.zhangyue01.com/idc_1/group6/M00/78/EC/CmRaIVutqm2ESHMBAAAAAOwpIbg774997852.jpg?v=l2EYw1my&t=CmQUNl6IvcY." alt="">
                        </div>
                        <div class="name">
                            超级热血教师
                        </div>
                        <div class="many">
                            ￥4.90
                        </div>
                    </div>
                    <div class="t-box">
                        <div class="image">
                            <img src="https://book.img.zhangyue01.com/idc_1/group61/M00/0A/FD/CmRabl926oyEHB-NAAAAAK21Aho746844703.jpg?v=YawZbTbS&t=CmRabl926ow." alt="">
                        </div>
                        <div class="name">
                            超越狂暴升级
                        </div>
                        <div class="many">
                            ￥4.90
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "../assets/font-two/iconfont.css";

.pay_box {
    width: 100%;

    .pay_top {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        h3 {
            font-weight: 600;
        }

        .dian {
            display: flex;

            span {
                display: block;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: #818181;
                margin-left: 5px;
            }
        }
    }
    .tuijian{
        padding: 10px;
        background-color: #f7f7fa;
        h3{
            font-weight: 600;
        }
        .tui{
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
            flex-wrap: wrap;
            .t-box{
                background-color: #fff;
                overflow: hidden;
                border-radius: 10px;
                margin-bottom: 10px;
                .image{
                    width: 172px;
                    height: 172px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .name{
                    margin-top: 5px;
                    font-size: 14px;
                    padding: 0 8px;
                }
                .many{
                    margin-top: 5px;
                    margin-bottom: 10px;
                    font-size: 17px;
                    color: #e76f41;
                    padding: 0 8px;
                }
            }
        }
    }
}

::v-deep {
    .pay_main {
        .van-tab--active {
            font-weight: 600;
        }

        .van-tabs__line {
            width: 25px;
        }

        .box_p {
            padding: 10px;
            background-color: #f7f7fa;

            .box_b {
                padding: 10px;
                border-radius: 10px;
                background-color: #fff;
                margin-bottom: 10px;

                .top {
                    display: flex;
                    justify-content: space-between;

                    .title_t {
                        display: flex;
                        align-items: center;

                        img {
                            width: 16px;
                            height: 16px;
                            border-radius: 5px;
                        }

                        span {
                            font-size: 14px;
                            margin-left: 5px;
                        }
                    }

                    strong {
                        font-size: 14px;
                        color: #e76f41;
                    }
                }

                .bottom {
                    margin-top: 15px;
                    display: flex;
                    justify-content: space-between;

                    .image {
                        width: 70px;
                        height: 70px;
                        border-radius: 5px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .title {
                        margin-right: 80px;

                        p {
                            font-size: 16px;
                            font-weight: 600;
                        }

                        span {
                            display: block;
                            font-size: 13px;
                            color: #818181;
                            margin-top: 5px;
                        }
                    }

                    .many {
                        p {
                            font-size: 13px;
                            color: #818181;
                            margin-bottom: 5px;
                            text-align: center;
                        }

                    }

                }

                .num {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    font-size: 14px;

                    strong {
                        font-size: 20px;
                    }
                }
                .buttons{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    margin-top: 5px;
                    button{
                        padding: 6px 15px;
                        border: 1px solid #eee;
                        background-color: #fff;
                        font-size: 13px;
                        border-radius: 5px;
                        margin-left: 10px;
                        &:nth-child(2){
                            background-color: #e76f41;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
</style>